<%@ include file="/WEB-INF/views/utils/includes.jsp" %>
<fieldset>
	<legend>
		<b><tu:i18n value="label.manifest.items"/></b>
	</legend>
	<table class="item-list">
		<thead>
			<tr>
			  <td><tu:i18n value="label.manifest.item.description"/></td>
              <td><tu:i18n value="label.manifest.item.measure"/></td>
              <td><tu:i18n value="label.manifest.item.unitPrice"/></td>
              <td><tu:i18n value="label.manifest.item.qty"/></td>
			  <td><tu:i18n value="label.manifest.item.docRef"/></td>
			</tr>
		</thead>
		<tbody>
		<c:forEach var="item" items="${items}">
			<tr class="item">
			  <td>${item.description}</td>
			  <td>${item.measure}</td>
              <td>${item.unitPrice}</td>
              <td><gf:input value="${item.qty}" path="qty"/></td>
			  <td><gf:input value="${item.docReference}" path="docReference"/></td>
			</tr>
		</c:forEach>
            <tr class="item" style="display: none;">
              <td class="description">&nbsp;</td>
              <td class="measure">&nbsp;</td>
              <td class="unitPrice">&nbsp;</td>
              <td><gf:input value="0" path="qty"/></td>
              <td><gf:input value="" path="docReference"/></td>
            </tr>
		
		<c:if test="${editable}">
		    <tr>
              <td><select id="productList"></select></td>
              <td colspan="3">
                <button type="button" id="addNewProduct">add</button>
<script type="text/javascript">
$(
	function() {
		$.post("/product/all", {action:"json"}).success(
			function (productList) {
				function getProduct(id) {
					for(var i = 0; i<productList.length; ++i)
						if(productList[i].id == id)
							return productList[i];
					return null;
				}
				
				$(document).ready(
			        function() {
			        	$("#productList").parents("form"),submit(
			        			function() {
			        				alert('TODO organize item_list');
			        			}
			        	);
			        	
			        	for(var i in productList) {
			        		$("#productList").append($("<option>").val(productList[i].id).html(productList[i].description))
			        	}
			        	
			            var list = $(".item-list");
			            
			            $("#addNewProduct").click(
			                function() {
			                	var product = getProduct($("#productList").val());
			                    var item = list.find(".item").last().clone();
			                    item.find(".description").html(product.description);
			                    item.find(".measure").html(product.measure);
			                    item.find(".unitPrice").html(product.unitPrice);
			                    item.find("input").val(0);
			                    item.find("input[name^=id]").val(product.id);
			                    list.find(".item").last().after(item);
			                    item.show();
			                    
			                    return false;
			                }
			            );
			        }
				);
			}
		);
		
	}
);

</script>              
              </td>
            </tr>
		</c:if>
		</tbody>
	</table>
</fieldset>
